<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Facebook Spectrum</title>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>
<script type="text/javascript" src="yearview.js"></script>
<script type="text/javascript" src="visualization.js"></script>
<script type="text/javascript" src="timeline.js"></script>
<script src="compact-painter2.js" type="text/javascript"></script>
<script type="text/javascript" src="UProgressBar.js"></script>
<script type="text/javascript" src="wordcumulus.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="spectrum.js"></script>

<link rel="shortcut icon" href="/svn/trunk/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="spectrum.css">
<script type="text/javascript">
	google.load("visualization", "1", {packages:["corechart"]});
	google.load("visualization", "1", {packages:["table"]});
	google.load("visualization", "1");
	google.load("jquery", "1.4.4");
</script>


<script language="Javascript">

	function switchTab(tab) {
		log('switchTab called for '+tab);
		window.location.hash = tab;

		$('.tab').each(function(index) {
			$(this).removeClass('selected');
			if($(this).text().toLowerCase()==tab)
				$(this).addClass('selected');
		});

		if(userLoggedIn) {
			$('.block').each(function(index) {
				$(this).removeClass('show');
				$(this).addClass('hide');
				if($(this).attr('id')==tab+'Block') {
					$(this).removeClass('hide');
					$(this).addClass('show');
				}
			});


			if(tab=='home') {

			} else if(tab=='friends') {
				displayFriendSphere();
			} else if(tab=='timeline') {
				displayTimeline();
			} else if(tab=='birthday') {
				displayBirthdayInfo();
			} else if(tab=='location') {
				displayLocationInfo();
			} else if(tab=='albums') {
				displayAlbumInfo();
			} else if(tab=='mutuals') {
				displayMutualFriendInfo();
			} else if(tab=='other') {
				drawGenderChart();
				drawEducationChart();
			} else {
				//This might be FAQ page
			}
		} else {
			if(tab=='faq' || tab=='home') {
				$('.block').each(function(index) {
					$(this).removeClass('show');
					$(this).addClass('hide');
				});

				$('#'+tab+'Block').removeClass('hide');
				$('#'+tab+'Block').addClass('show');
			}
		}

	}

	var lastHash = '';
	function pollHash() {
	    if(lastHash !== location.hash) {
	        lastHash = location.hash;
	        // hash has changed, load the content:
	        //alert(lastHash);
	        switchTab(lastHash.substring(1));
	    }
	}
	//Poll for back button changes
	setInterval(pollHash, 100);


	function showLoadingMessage(){
		var maskHeight = $(document).height();
	    var maskWidth = $(document).width();
	    $('#mask').css({'top':0, 'left':0, 'width':maskWidth,'height':maskHeight});
	    var winH = $(window).height();
        var winW = $(window).width();
        //Center the popup window to center the window
        $('#lightbox-panel').css('top',  winH/2-$('#lightbox-panel').height()/2);
        $('#lightbox-panel').css('left', winW/2-$('#lightbox-panel').width()/2);

		$("#mask, #lightbox-panel").fadeIn(300);
	}

	function checkContentsLoaded() {
		if(AlbumsLoaded) {
			hideLoadingMessage();
		} else {
			window.setTimeout("checkContentsLoaded();", 500);
		}
	}

	function startLoadingContents() {
		showLoadingMessage();
		userGreeting();
		loadProfileData();
		checkContentsLoaded();
	}

	function hideLoadingMessage(){
	 	$("#mask, #lightbox-panel").fadeOut(300);
	}

</script>

</head>
<body>

<!--
<div id="loginbox">
	<fb:login-button perms="friends_photos,friends_location,friends_birthday,read_stream,friends_education_history"></fb:login-button>
</div>
-->

<div id="lightbox-panel">
	<img src="ajax-loader.gif" align="left" style="margin-top:12px;margin-right:15px;vertical-align:text-top"><h2>Loading, Please wait...</h2>
</div>
<div id="mask"></div>

<table width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td width="50%">&nbsp;</td>
			<td width="400" align="right" style="width:400px;padding-right:25px">
				<fb:login-button autologoutlink="true" perms="friends_photos,friends_location,friends_birthday,read_stream,friends_education_history"></fb:login-button>
			</td>
		</tr>
</table>
<div class="heading">
	<div style="height:105px;position:relative">
		<img src="chart.png" style="margin-left:20px" width="100" height="100">&nbsp; <span style="color:#111111;position:absolute;font-size:34px;bottom:15px;left:130px;">Facebook Spectrum</span>
		<span style="text-align:right;align:right;position:absolute;bottom:5px;right:10px;"><fb:like href="http://www.facebookspectrum.com" show_faces="false" width="300"></fb:like></span>
	</div>
</div>


<table width="100%" height="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td width="100" style="background-color:#e8eef7" valign="top">
			<ul id="menu">
				<li class="tab selected" onclick="switchTab('home');">Home</li>
				<li class="tab" onclick="switchTab('friends');">Friends</li>
				<li class="tab" onclick="switchTab('timeline');">Timeline</li>
				<li class="tab" onclick="switchTab('birthday');">Birthday</li>
				<li class="tab" onclick="switchTab('location');">Location</li>
				<li class="tab" onclick="switchTab('albums');">Albums</li>
				<li class="tab" onclick="switchTab('other');">Other</li>
				<li class="tab" onclick="switchTab('mutuals');">Mutuals</li>
				<li class="tab" onclick="switchTab('more');">More</li>
				<li class="tab" onclick="switchTab('faq');">FAQ</li>
			</ul>
		</td>
		<td width="90%" valign="top" style="padding:10px;border-right:4px solid #e8eef7">

			<div class="block show" id="homeBlock">
				<!--homeBlock-->
				<div style="margin:20px">
					<p><div id="welcomeMsg"></div></p>
					<p>Thank you for trying out <b>Facebook Spectrum</b>. Facebook Spectrum is an application utilizing Facebook APIs to provide you a birds eye view of all your friends on facebook.</p>
					<p>You will need to be logged in to Facebook to access this application. Please check the FAQ section for more information. </p>
					<p>Feel free to share it with your friends and I appreciate your valuable feedback..</p>
				</div>
			</div>
			<div class="block hide" id="friendsBlock">
				<!--<div style="width:600px;text-align:center" align="center">A 3-D view of all your friends</div>-->
				<div id="friendsSphere"></div>
				<div style="clear:both"></div>
				<p>Here is a list of all your friends in the order they created their accounts on Facebook. Ever wondered who jumped in on the Facebook wagon first? Here is your answer.. </p><br>
				<!--friendsBlock-->
			</div>
			<div class="block hide" id="otherBlock">
				<!--otherBlock-->
				<div style="float:left;display:" id='gender_chart_div'></div>
				<div style="float:left;display:" id='education_chart_div'></div>
			</div>
			<div class="block hide" id="moreBlock">
				<!--moreBlock-->
				<div style="margin:20px">
					More features will be added with time..
				</div>
			</div>
			<div class="block hide" id="mutualsBlock">
				<!--mutualsBlock-->
				<div id="mutuals"></div>
				<div id="mutualFriends"></div>
			</div>

			<div class="block hide" id="timelineBlock">
				<!--timelineBlock-->
				<div style="position:relative">
					<div id="friendsList" style="position:absolute;float:right;top:5px;right:30px;">View timeline for </div>
				</div>
				<div style="clear:both"></div>
				<br><br>
				The following timeline displays a graphical view of your Facebook feed. You can see the posts and comments on your wall easily using the timeline.<br><br>
				You can navigate the timeline by double clicking, dragging or using the arrow keys on your keyboard.<br><br>
				If you are interested in the timeline view of any of your friends, please use the dropdown on the right.
				<br><br>
				<div id="timeline_div" style="position:relative;height:500px;width:100%;border:1px solid #445EEE;background-color:#e8eef7">
					<div style="position:absolute; top:10px;right:10px; color:#112aba;padding:5px;font-weight:bold">Loading...</div>
				</div>
			</div>
			<div class="block hide" id="birthdayBlock">
				<!--birthdayBlock-->
				<table border="0" cellspacing="0" cellpadding="0">
					<tr valign="top">
						<td colspan="2">
							The birthdays of all your friends are highlighted on the calendar below. Click on a highlighted date or month to view the list of friends whose b'days fall during that time.<br><br>
						</td>
					</tr>
					<tr valign="top">
						<td style="width:670px">
							<!--Charts go here (one below the other)-->
							<div id="calendar_div" style="float:left"></div>
						</td>
						<td style="border-left:4px solid #e8eef7">
							<!--Click on a slice in the pie chart and details load here..-->
							<div id="upcoming_div_detail" style="float:left;margin-left:30px"></div>
							<div style="clear:both"></div>
							<div id="calendar_div_detail" style="margin-left:30px"></div>
						</td>
					</tr>
				</table>
				<div style="clear:both"></div>
				<div id="calendar_div_table" style="margin-top:20px;"></div>
			</div>
			<div class="block hide" id="locationBlock">
				<!--locationBlock-->
				The followig map displays the location of all your Facebook friends. The map can take some time to load if you have a lot of friends on Facebook. <br><br>
				<div id="map_canvas" style="width:99%;height:500px;position:relative;border:1px solid #112aba;background-color:#e8eef7">
					<!--<div style="position:absolute; top:10px;right:10px;background-color:#FFF790; color:#770000;padding:5px;font-weight:bold">Loading...</div>-->
					<div id="waiting" style="position:absolute; top:10px;right:10px;background-color:#e8eef7; color:#112aba;padding:5px;font-weight:bold">Loading...</div>
				</div>
				<div id="location_div_table" style="margin-top:20px;"></div>
			</div>
			<div class="block hide" id="albumsBlock">
				<!--albumsBlock-->
				<table border="0" cellspacing="0" cellpadding="0">
					<tr valign="top">
						<td colspan="2">
							<p>The following pie charts display your top 10 friends with the most number of albums or photos. You can click on a slice on the pie chart to display more information.</p>
							<p>If you want to see any of your friends' albums, please use the dropdown on the right. </p><br><br>
						</td>
					</tr>
					<tr valign="top">
						<td width="670px">
							<div id="album_charts"></div>
						</td>
						<td width="100%" align="left" style="border-left:4px solid #e8eef7">
							<div style="position:relative">
								<div id="friendsAlbumList" style="position:absolute;top:5px;right:20px;">View albums for </div>
							</div>
							<div style="clear:both"></div>
							<br><br><br><br>
							<div id="album_detail" style="float:left;margin-left:30px"></div>
						</td>
					</tr>
				</table>
			</div>
			<div class="block hide" id="faqBlock">

				<div style="margin-left:-10px;">Here are some of the questions you might have regarding the use of this application. The answers to the most common concerns and frequently asked questions are given below.</div>

				<div class="faq">What is Facebook Spectrum and what does it do?</div>
					This application is a mash-up of several APIs and web services to give more insights to your facebook account. It gives a consolidated view of your facebook friends and their content.

				<div class="faq">How do I login to Facebook Spectrum?</div>
					There is no seperate login for the application. You need to be logged in to Facebook to access the application. If you are not logged in, a login button is provided at the top of the page to login to Facebook.

				<div class="faq">Is it safe to enter my userid and password?</div>
					Yes. This application does not authenticate you by itself, it redirects you to a popup window provided by Facebook and the authentication is completely done between you and facebook.com. When you authorize access to Facebook Spectrum, it can then request facebook.com to get the relevant information that is required to display this webpage. None of it is stored anywhere.

				<div class="faq">Why do I need to give access to the application?</div>
					This application talks to facebook to get the required information to display the webpage. Facebook does not make any of your information available to the application without you granting the permission.

				<div class="faq">Is my information secure?</div>
					Yes. Your information is very much secure. All your Facebook content that you see on this application is downloaded on demand once you grant required permissions. You will not see any content that you are not authorized to see.

				<div class="faq">Do you store the information that I see on this website?</div>
					Absolutely not. None of the information you see on this website is stored anywhere. Once you are done with the webpage, you can click logout to disconnect from Facebook. The application can no longer access any information thereafter. <br><br>
					For those who understand the technical jargon, this application does not have a database, not does store your information in cookies. All the information is retrieved on demand from facebook via Facebook APIs and is dispalyed in a much readable form.

				<div class="faq">What about spam?</div>
					Facebook Spectrum does not retrieve your email address or contact details from your account on Facebook. You could clearly see that in the list of permissions you need to grant this application when you login. There is absolutely no intention of spam so this application completely stays away from your email or phone details.

				<div class="faq">Can I see the information of any facebook user in this application?</div>
					Of course not. You can only access the information of your friends on Facebook. Also, If your friend does not grant you access to some of his/her information, you will not be able to see that as information as well.

				<div class="faq">What components are used in this application?</div>
					Facebook Spectrum makes use of variuos open-source APIs available out there. Some of which are outlined below.
					<ul>
						<li>Facebook Graph API</li>
						<li>Google Maps API</li>
						<li>Google Visualization API</li>
						<li>Google Chart API</li>
						<li>Simile Timeline API</li>
					</ul>

				<div class="faq">How do I report issues, comments or concerns?</div>
					Facebook Spectrum was developed as a hobby and it would be great if you can give your valuable feedback on the same. Please post your comments on the <a href="http://www.facebook.com/apps/application.php?id=132839880113484" target="new">application page</a>.
			</div>
		</td>

		<td>
			<div style="width:150px" id="extraContent"></div>
		</td>

	</tr>
</table>

<div class="footer">[Facebook Spectrum is not affiliated with Facebook]</div>

<div style="position:absolute;top:10px;right:20px;height:90%;display:none">
<span>Debug Log:</span><a href="javascript:void(0);" onclick="document.getElementById('debugLog').innerHTML='';">Clear</a>
<div id="debugLog" style="position:absolute;width:400px;height:200px;overflow:auto;border:2px solid#a6ce39;left:10px;bottom:10px;display:none"></div>
</div>


<div id="fb-root"></div>
	<script type="text/javascript">
		window.fbAsyncInit = function() {
			var friendId = 0;
			FB.init({appId: '132839880113484', status: true, cookie: true,
					 xfbml: true});

			FB.getLoginStatus(function(response) {
				//alert('FB.getLoginStatus = '+response.session+' - '+response.status+' - '+response.perms);
				if (response.session) {
					// logged in and connected user, someone you know
					//alert('getLoginStatus '+response.session);
					if(!userLoggedIn) {
						userLoggedIn = true;
						startLoadingContents();
					}
				} else {
				    // no user session available, someone you dont know
				}
			});

			FB.Event.subscribe('auth.sessionChange', function(response) {
				if (response.session) {
					// A user has logged in, and a new cookie has been saved
					//alert('sessionChange '+response.session);
					if(!userLoggedIn) {
						userLoggedIn = true;
						startLoadingContents();
					}
				    //window.location.reload();
				    //reload window upon login and set session
				} else {
					// The user has logged out, and the cookie has been cleared
					//alert('user logged out..');
				    window.location.reload();
				    //reload the page and clear the cookie
				}
			});

		};
		(function() {
			var e = document.createElement('script');
			e.type = 'text/javascript';
			e.src = document.location.protocol +'//connect.facebook.net/en_US/all.js';
			e.async = true;
			document.getElementById('fb-root').appendChild(e);
		}());

		function userGreeting() {
			FB.api('/me', function(response) {
				document.getElementById('welcomeMsg').innerHTML += '<br>Welcome <b>'+response.name+'</b>';
				loggedInUserId = response.id;
			});
		}

		function loadProfileData() {
			FB.api('/me/friends?fields=id,name,location,birthday,picture,gender,education', function(response) {
				//document.getElementById('welcomeMsg').innerHTML += 'You have '+response.data.length+' friends';
				for(var i=0;i<response.data.length;i++) {
					//if(response.data[i].id=='592916335')
					friends[response.data[i].id] = response.data[i].name;

					//Location Information
					var loc = 'Unknown';
					if(response.data[i].location) {
						loc = (response.data[i].location.name==null)?'Unknown':response.data[i].location.name;
					}
					if(locationInfo[loc])
						locationInfo[loc][locationInfo[loc].length] = response.data[i].id;
					else {
						locationInfo[loc] = [];
						locationInfo[loc][0] = response.data[i].id;
					}

					//Birthday Information
					var bmonth = 'Unknown'; var bday = 'Unknown';
					if(response.data[i].birthday) {
						var birthday = response.data[i].birthday;
						bmonth = parseInt(birthday.substring(0,2),10);
						bday = parseInt(birthday.substring(3,5),10);
					}
					if(birthdayInfo[bmonth]) {
						if(birthdayInfo[bmonth][bday])
							birthdayInfo[bmonth][bday][birthdayInfo[bmonth][bday].length] = response.data[i].id;
						else {
							birthdayInfo[bmonth][bday] = [];
							birthdayInfo[bmonth][bday][0] = response.data[i].id;
						}
					}
					else {
						birthdayInfo[bmonth] = [];
						birthdayInfo[bmonth][bday] = [];
						birthdayInfo[bmonth][bday][0] = response.data[i].id;
					}

					//Picture Information
					pictureInfo[response.data[i].id] = response.data[i].picture;

					//Education Information
					var edu = 'Unknown';
					if(response.data[i].education) {
						edu = (response.data[i].education[0].type==null)?'Unknown':response.data[i].education[0].type;
					}
					if(educationInfo[edu])
						educationInfo[edu][educationInfo[edu].length] = response.data[i].id;
					else {
						educationInfo[edu] = [];
						educationInfo[edu][0] = response.data[i].id;
					}

					//Gender Information
					var gender = 'Unknown';
					if(response.data[i].gender) {
						gender = initCaps(response.data[i].gender);
					}
					if(!genderInfo[gender])
						genderInfo[gender] = [];
					genderInfo[gender][genderInfo[gender].length] = response.data[i].id;

					//TODO:Debug only - Remove Later
					//if(i>15)
					//	break;
				}

				(function() {
					revealAlbumInfo();
				})();

				(function() {
					displayAllFriends();
				})();

				(function() {
					geocodeAllAddresses();
				})();

				(function() {
					createFriendsDropdown();
				})();

			});
		}

	</script>

	<!-- Google Analytics -->
	<script type="text/javascript">

	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-1214589-24']);
	  _gaq.push(['_trackPageview']);

	  (function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();

	</script>

</body>
</html>